<template>
	<view class="content">
		<!-- tabbar -->
		<view class="user-topbar">
			<!-- <u-navbar :is-back="false" :is-fixed="false" height="0" :border-bottom="false"></u-navbar> -->
			<view class="is-back">
				<view class="back-taps" @click="onBack"><u-icon name="arrow-leftward" color="#fff" size="38"></u-icon></view>
			</view>
			<!-- 用户信息 -->
			<view class="user-info">
				<view class="user-head">
					<image :src="userinfo.headpic" mode="aspectFit" class="image head_img" v-if="userinfo.headpic" @click="open"></image>
					<u-icon name="account-fill" v-else color="#fff" size="48"></u-icon>
				</view>

				<view class="user-show">
					<text class="name">{{ userinfo.mobile }}</text>
					<view class="usertag">
						<view class="tagvs">
							<image src="../../static/icon/icon_vip_gray.png" mode="aspectFit" class="tag1"></image>
							<text>{{ userinfo.uUser }}</text>
						</view>
            <view class="vinvip">
              <text>{{ userinfo.groupName }}</text>
            </view>
						  <!-- <view class="tagvs ml">
              <image src="../../static/icon/icon_vip_gray.png" mode="aspectFit" class="tag1"></image>
              <text>{{ userinfo.status }}</text>
              <u-icon name="arrow-right" size="20"></u-icon>
            </view> -->
					</view>
				</view>
				<view class="user-change">
					<text>{{ userinfo.user_name }}</text>
				</view>
			</view>
		</view>
		<!-- container -->
		<view class="container">
			<view class="navtabs-cards">
				<view class="tobox-nav border-right" @click="openUpdateUser">
					<image src="../../static/icon/icon_mine_security_center.png" mode="aspectFit" class="icon"></image>
					<text class="text">个人资料</text>
				</view>
				<view class="tobox-nav" @click="msg()">
					<image src="../../static/icon/icon_mine_identity_verification.png" mode="aspectFit" class="icon"></image>
					<text class="text">身份认证</text>
				</view>
			</view>
			<!-- links -->
			<view class="links-box">
				<u-cell-group>
				<!-- 	<u-cell-item title="意见反馈" >
						<view class="" slot="icon"><image src="../../static/icon/icon_service.png" mode="aspectFit" class="icon"></image></view>
					</u-cell-item> -->
					<u-cell-item title="收件箱" hover-class="none" @click="openNewsNotice">
						<view class="" slot="icon"><image src="../../static/icon/src_assets_icons_icon_question_asset.png" mode="aspectFit" class="icon"></image></view>
					</u-cell-item>
					<u-cell-item title="问题反馈" hover-class="none" @click="openNewsOpinion">
						<view class="" slot="icon"><image src="../../static/icon/icon_feedback.png" mode="aspectFit" class="icon"></image></view>
					</u-cell-item>
				<!-- 	<u-cell-item title="检查版本" value="4.0.6">
						<view class="" slot="icon"><image src="../../static/icon/icon_update.png" mode="aspectFit" class="icon"></image></view>
					</u-cell-item> -->
				</u-cell-group>
				<u-gap height="24" bg-color="#071724"></u-gap>
				<u-cell-group>
					<u-cell-item title="邀请好友" hover-class="none" @click="openSpread">
						<view class="" slot="icon"><image src="../../static/icon/icon_recommend.png" mode="aspectFit" class="icon"></image></view>
					</u-cell-item>
					<u-cell-item title="我的团队" :title-style="{color: '#f8de03'}" hover-class="none" @click="openUserList">
						<view class="" slot="icon"><image src="../../static/icon/icon_social.png" mode="aspectFit" class="icon"></image></view>
					</u-cell-item>
				<!-- 	<u-cell-item title="激活会员" hover-class="none" @click="openActiveUser" v-if="userinfo.uIsCore ==1">
						<view class="" slot="icon"><image src="../../static/icon/icon_community.png" mode="aspectFit" class="icon"></image></view>
					</u-cell-item> -->
				
				
				<!-- 	<u-cell-item title="推荐下载">
						<view class="" slot="icon"><image src="../../static/icon/icon_download.png" mode="aspectFit" class="icon"></image></view>
					</u-cell-item> -->
				</u-cell-group>
		
			
				<u-gap height="24" bg-color="#071724"></u-gap>
				<u-cell-group>
					<u-cell-item title="充提记录" hover-class="none" @click="openMoneyChangeList">
						<view class="" slot="icon"><image src="../../static/icon/icon_exchange_rate.png" mode="aspectFit" class="icon"></image></view>
					</u-cell-item>
			<!-- 		<u-cell-item title="收款地址" hover-class="none" @click="openAccounts">
						<view class="" slot="icon"><image src="../../static/icon/icon_rate.png" mode="aspectFit" class="icon"></image></view>
					</u-cell-item> -->
				</u-cell-group>
				
				
				
				
			<!-- 	<u-gap height="24" bg-color="#071724"></u-gap>
				<u-cell-group>
					<u-cell-item title="UID" value="9999999999" :arrow="false">
						<view class="" slot="icon"><image src="../../static/icon/icon_uid.png" mode="aspectFit" class="icon"></image></view>
						<view slot="right-icon"><image src="../../static/icon/file_copy_icon.png" mode="aspectFit" class="icon-copy"></image></view>
					</u-cell-item>
				</u-cell-group> -->
				<u-gap height="24" bg-color="#131e30"></u-gap>
				<view class="logout"><u-button type="primary" :custom-style="{ 'background-color': '#131e30', color: '#cdd4e7' }" ripple @click="logout()">退出当前账户</u-button></view>
				<u-gap height="24" bg-color="#131e30"></u-gap>
			</view>
		</view>

		<uni-popup ref="popup" type="center">
			<view class="popup_cont">
				<view class="popup_cont_list clearfix">
					<view class="fl head_img_item_cont" v-for="(item, index) in headpiclist" :key="index">
						<image :src="item.pic" mode="" class="head_img_item" :data-srcdata="item.pic" @click="showImg($event, index)"></image>
						<image src="../../static/icon/right.png" mode="" class="active_head_img" :class="{ active: picindex == index }"></image>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>

import { CUser } from '@/common/cache/user.js';
import bussiness from '../../static/dataJson/bussiness.json';
var cache_user = new CUser();
export default {
	data() {
		return {
			userinfo: {},
			headpiclist: bussiness.headpiclist,
				picindex: 0
		};
	},
	components: {
		
	},
	onShow() {
		//个人数据
		cache_user.userinfo().then(res => {
			console.log('usershow', res);
			this.userinfo = res;
		});
	},

	methods: {
		open() {
			this.$refs.popup.open();
		},
		close() {
			this.$refs.popup.close();
		},

		set() {
			this.$api.http.post('/assistance/index/setUserHeadPic', { headpic: this.userinfo.headpic }).then(res => {
				this.$api.msg(res.msg);
			});
		},

		logout() {
			var that = this;
			uni.showModal({
				title: '提示',
				content: '是否退出？',
				success: function(res) {
					if (res.confirm) {
						that.$api.http.post('auth/loginout').then(res => {
							uni.removeStorageSync('token');
							uni.reLaunch({
								url: '../login/login',
								success: res => {}
							});
						});
					} else if (res.cancel) {
					}
				}
			});
		},

		showImg(e, val) {
			console.log(e.target.dataset.srcdata);
			this.userinfo.headpic = e.target.dataset.srcdata;
			this.picindex = val;

			this.set();
			this.close();
		},
		onBack() {
			uni.navigateBack();
		},
		
	
		openActiveUser(){
		
			
			uni.navigateTo({
				url: '../bussiness/activeUser',
				success: res => {},
				})
		},
		
		openMoneyChangeList(){
			uni.navigateTo({
				url: '../bussiness/changemoneylist',
				success: res => {},
				})
		},
		
		openUpdateUser(){
			
			uni.navigateTo({
				url: '../bussiness/updateuser',
				success: res => {},
				})
			
		},
		
		openAccounts(){
			
			uni.navigateTo({
				url: '../bussiness/accounts',
				success: res => {},
				})
			
		},
		openNewsOpinion(){
				uni.navigateTo({
					url: '../bussiness/news?tabCur='+3,
					success: res => {},
					})
			},
			
		openNewsNotice(){
			uni.navigateTo({
				url: '../bussiness/news?tabCur='+0,
				success: res => {},
				})
		},
		openSpread(e) {
			uni.navigateTo({
				url: '../user/spread/spread'
			});
		},
		
		openUserList(){
			uni.navigateTo({
				url: '../bussiness/userslists'
			});
		},
		
		
		
		
		msg(){
			this.$api.msg('暂未开放');
		}
		
	}
};
</script>

<style lang="scss">
.container {
	padding-top: 280rpx;
}
.user-topbar {
	position: fixed;
	left: 0;
	top: 0;
	background: linear-gradient(to right, #20314c, #020305);
	z-index: 10;
	padding-top: var(--status-bar-height);
	height: 300rpx;
	width: 100%;
	border-bottom-right-radius: 36rpx;
	border-bottom-left-radius: 36rpx;
	.is-back {
		display: block;
		padding: 20rpx 0;
	}
	.back-taps {
		padding: 0 30rpx;
	}
	.user-info {
		display: flex;
		padding: 0 30rpx;
		align-items: center;
	}
	.user-head {
		border-radius: $uni-border-radius-circle;
		background-color: #4184ef;
		width: 100rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.user-show {
		display: flex;
		flex-direction: column;
		padding: 0 30rpx;
		flex: 1;
		.name {
			color: #fff;
			font-size: 36rpx;
			line-height: 2em;
		}
		.usertag {
			display: flex;
			align-items: center;
			color: #fff;
			.tagvs {
				background-color: #5892f3;
				border-radius: 200rpx;
				padding-right: 16rpx;
				height: 38rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
			}
			.tag1 {
				width: 38rpx;
				height: 38rpx;
				border-radius: 50%;
				margin-right: 16rpx;
			}
		}
		.ml {
			margin-left: 10rpx;
		}
	}
	.user-change {
		font-size: $uni-font-size-base;
		color: #94c7fc;
	}
}
.navtabs-cards {
	display: flex;
	align-items: center;
	height: 204rpx;
	border-bottom: 1rpx solid $uni-text-color-grey;
	justify-content: center;
	.tobox-nav {
		width: 50%;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		&.border-right {
			&::after {
				content: '';
				position: absolute;
				right: 0;
				top: 50%;
				width: 1rpx;
				height: 50rpx;
				background-color: #eee;
				margin-top: -25rpx;
			}
		}
		.icon {
			width: 60rpx;
			height: 60rpx;
		}
		.text {
			font-size: $uni-font-size-base;
			color: $text-color;
			margin-top: 12rpx;
		}
	}
}
.links-box {
	position: relative;
	.icon {
		width: 42rpx;
		height: 42rpx;
		margin-right: 24rpx;
	}
	.icon-copy {
		width: 28rpx;
		height: 28rpx;
		margin-left: 10rpx;
		opacity: 0.6;
	}
}
.logout {
	display: block;
}

.head_img {
	border: 6upx solid #ffffff;
	border-radius: 50%;
	width: 100upx;
	height: 100upx;
}

.popup_cont {
	background-color: #ffffff;
	border-radius: 10upx;
	width: 520upx;
	height: auto;

	.popup_cont_list {
		padding: 20upx;

		.head_img_item_cont {
			position: relative;
			margin-left: 46upx;
			margin-bottom: 20upx;

			.head_img_item {
				width: 100upx;
				height: 100upx;
				border-radius: 50%;
				border: 2upx solid #cecece;
			}

			.active_head_img {
				position: absolute;
				top: 76upx;
				left: 26upx;
				width: 46upx;
				height: 46upx;
				display: none;
			}
		}
	}
}

.clearfix {
	zoom: 1;
	display: block;
}

.fl {
	float: left;
}
.vinvip {
  border-radius: 50%;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f7dd02;
  color: #0c0002;
  margin-left: 10rpx;
}
</style>
